<script>
import L from 'leaflet';
import { clone, isEmpty } from 'lodash';
import { vSelect } from 'istrong-mvue-common-ui';
import { MessageBox } from 'mint-ui';
import vCheckbox from './Checkbox.vue';
import DateTimeRange from './DateTimeRange.vue';
import AreaPicker from './AreaPicker.vue';

export default {
  name: 'filterPanel',
  components: {
    'vDateTimeRange': DateTimeRange,
    'VSelect': vSelect,
    'vCheckbox': vCheckbox,
    'vAreaPicker': AreaPicker
  },
  props: {
    position: {
      type: String,
      default: 'right'
    },
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: {
        timeRange: {},
        atcunits: []
      }
    },
    timeOpts: {
      type: Array,
      required: true
    },
    cityOpts: {
      type: Array
    },
    atcunitsOpts: {
      type: Array
    },
    areaPickerOpts: {
      type: Object,
      default: () => {
        return {
          enabled: false,
          static: [],
          default: ''
        }
      }
    }
  },
  watch: {
    visible: function (val) {
      let position = this.position;
      this.ownerVisible = val;
      this.transitionName = val ? 'fpanel-' + position + '-slide-right' : 'fpanel-' + position + '-slide-left';
    }
  },
  data () {
    return {
      ownerVisible: this.visible,
      transitionName: 'slide-left',
      timeRange: {
        beginTime: '',
        endTime: ''
      },
      atcunits: this.atcunitsOpts ? clone(this.atcunitsOpts) : undefined,
      areaPickerVisible: false,
      selectedArea: [],
      cityOptions: [],
      citySelected: null
    }
  },
  mounted () {
    this.emitFilterConditions();
    if (this.cityOptions) {
      this.cityOpts.forEach(item => {
        this.cityOptions.push(
          {
            key: item.area_code,
            value: item.area_name,
            info: item
          })
      });
      this.citySelected = this.cityOptions[0]
    }
  },
  created () {
    if (this.areaPickerOpts.enabled) {
      this.selectedArea = clone(this.areaPickerOpts.default);
    }
  },
  methods: {
    onSubmit () {
      if (this.emitFilterConditions()) {
        this.onHiddenFPanel();
      }
    },
    onHiddenFPanel () {
      this.$emit('stateChange', false);
    },
    emitFilterConditions () {
      if (this.citySelected) {
        // 重新定位城市
        this.$AppConfig.map.module.waterlogging.center = this.citySelected.info.center
        this.$AppConfig.interfaces_model.waterlogging.group.models[0].params.area_code = this.citySelected.info.area_code
      }

      if (this.atcunits) {
        let existAtcunit = false;
        this.atcunits.forEach(item => {
          if (item.checked) {
            existAtcunit = true;
            return false;
          }
        });
        if (!existAtcunit) {
          MessageBox('提示', '请选择测站隶属！');
          return false;
        }
      }
      let result = {
        timeRange: this.timeRange,
        atcunits: this.atcunits
      };
      if (this.areaPickerOpts.enabled && this.selectedArea && !isEmpty(this.selectedArea)) {
        result.area = this.selectedArea[this.selectedArea.length - 1].id;
      }
      this.$emit('input', result);
      return true;
    },
    onChangeArea (value) {
      this.selectedArea = value;
    },
    onOpenAreaPicker () {
      this.areaPickerVisible = true;
    }
  },
  computed: {
    selectedAreaTip () {
      if (!this.selectedArea || this.selectedArea.length === 0) {
        return '';
      }
      let r = [];
      this.selectedArea.forEach(item => {
        r.push(item.name);
      });
      return r.join('>');
    },
    Value () {
      return {
        timeRange: this.timeRange,
        atcunits: this.atcunits
      };
    }
  }
}
</script>

<template>
  <transition v-bind:name="transitionName">
    <div
      class="FPanelMain transition-Slide"
      v-show="ownerVisible"
      :class="'FPanelMain-'+position"
    >
      <div
        class="FPanelModal"
        v-on:click="onHiddenFPanel"
      ></div>
      <div class="FPanel">
        <div class="FPanel-Header">
          <hr class="FPanel-Header-DashLine">
          <div class="FPanel-Header-Title">筛选</div>
        </div>
        <div class="FPanel-FilterContent">
          <div
            class="FPanel-FilterContent-Item"
            v-if="areaPickerOpts.enabled"
          >
            <div class="displayflex FPanel-FilterContent-AreaChoose">
              <div class="FPanel-FilterContent-AreaChoose-Title">行政区划</div>
              <div
                class="FPanel-FilterContent-AreaChoose-Content"
                @click="onOpenAreaPicker"
              >
                <span>{{selectedAreaTip}}</span>
                <div class="ion-arrow-down-b areaChoose-content-after"></div>
              </div>
            </div>
          </div>
          <div
            class="FPanel-FilterContent-hr"
            v-if="areaPickerOpts.enabled"
          ></div>

          <div class="FPanel-FilterContent-Item">
            <div class="dateTimeRange-Select">
              <div class="ion-ios-location city-Icon"></div>
              <div class="dateTimeRange-Time-Select">
                <VSelect
                  v-model="citySelected"
                  :data="cityOptions"
                  class="city-InputSelect"
                ></VSelect>
              </div>
            </div>
          </div>

          <div class="FPanel-FilterContent-Item">
            <vDateTimeRange
              v-model="timeRange"
              :timeOpts="timeOpts"
            ></vDateTimeRange>
          </div>

          <div
            class="FPanel-FilterContent-Item"
            v-if="atcunits !== undefined && atcunits !== null"
          >
            <div class="FPanel-FilterContent-Atcunit-Title">
              <div class="FPanel-FilterContent-Atcunit-Title-Legend"></div>测站隶属
            </div>
            <div class="FPanel-FilterContent-Atcunit-Select">
              <vCheckbox
                v-for="(atcunit, index) in atcunits"
                :key="index"
                v-model="atcunit.checked"
                :dataValue="atcunit.name"
                :dataLabel="atcunit.name"
                class="FPanel-FilterContent-Atcunit-Select-CheckBox"
              ></vCheckbox>
            </div>
          </div>
        </div>
        <div class="displayflex FPanel-Bottom">
          <div
            class="FPanel-Button-Cancle"
            v-on:click="onHiddenFPanel"
          >取消</div>
          <div class="FPanel-Button-vhr"></div>
          <div
            class="FPanel-Button-Submit"
            v-on:click="onSubmit"
          >确定</div>
        </div>
      </div>
      <vAreaPicker
        v-if="areaPickerOpts.enabled"
        v-model="areaPickerVisible"
        :staticData="areaPickerOpts.static"
        :defaultSelected="areaPickerOpts.default"
        @change="onChangeArea"
      ></vAreaPicker>
    </div>
  </transition>
</template>
<style>
.fpanel-right-slide-left-enter,
.fpanel-right-slide-right-leave-active,
.fpanel-right-slide-left-leave-active,
.fpanel-right-slide-right-enter {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.fpanel-left-slide-left-enter,
.fpanel-left-slide-right-leave-active,
.fpanel-left-slide-left-leave-active,
.fpanel-left-slide-right-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.FPanelMain {
  position: absolute;
  z-index: 2;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}
.FPanelMain-left > div {
  float: right;
}
.FPanelMain-right > div {
  float: left;
}
.FPanelModal {
  background-color: rgba(0, 0, 0, 0.5);
  width: 20%;
  height: 100%;
}
.FPanel {
  position: relative;
  width: 80%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #fff;
}

.FPanel-FilterContent {
  position: absolute;
  top: 23px;
  bottom: 40px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
.FPanel-FilterContent > div {
  float: left;
  width: 100%;
}
.FPanel-Bottom {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #eeedf1;

  justify-content: space-between;
}
.FPanel-Bottom > div {
  float: left;
}
.FPanel-Button-Cancle,
.FPanel-Button-Submit {
  width: 49%;
  text-align: center;
  font-size: 18px;
  text-shadow: 5px 5px 5px #f0eff5;
}
.FPanel-Button-vhr {
  width: 1px;
  height: 100%;
  background: #eeedf1;
}
.FPanel-Header {
  position: absolute;
  top: 0px;
  width: 100%;
  line-height: 20px;
  min-height: 20px;
}
.FPanel-Header-DashLine {
  border: 1px dashed #b3b3b3;
  height: 1px;
}
.FPanel-Header-Title {
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
  font-size: 16px;
  letter-spacing: 6px;
  color: #5a5a5a;
}
.FPanel-FilterContent-Item > div {
  padding: 2px 6px;
}
.FPanel-FilterContent-hr {
  margin: 8px 0px;
  width: 100%;
  height: 1px;
  background: #b3b3b3;
}
.FPanel-FilterContent-Atcunit-Title-Legend {
  float: left;
  margin-right: 8px;
  margin-top: 3px;

  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #57bb97;
}
.FPanel-FilterContent-Atcunit-Select-CheckBox {
  float: left;
}

.FPanel-FilterContent-AreaChoose {
  justify-content: space-between;
}
.FPanel-FilterContent-AreaChoose-Title {
  width: 24%;
  min-width: 64px;
}
.FPanel-FilterContent-AreaChoose-Content {
  position: relative;
  width: 74%;
  height: 26px;

  border: 1px solid #ddd;
  border-radius: 0.3125em;
}

.FPanel-FilterContent-AreaChoose-Content > span {
  padding: 2px 18px 0px 3px;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden !important;
  white-space: nowrap;
}
.areaChoose-content-after {
  font-size: 22px;
  position: absolute;
  z-index: 10;
  top: -3px;
  right: 5px;
  height: 100%;
}

.city-Icon {
  color: red;
  font-size: 25px;
  margin-left: 3px;
}

.city-InputSelect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  padding: 0px;
  background: transparent !important;
}
</style>